<template>
  <div class="app-container">
    <meta name="format-detection" content="telephone=yes" />

    <div>
      <van-nav-bar title="确认订单"
                   left-text="返回"
                   @click-left="onClickLeft"
                   left-arrow
      />
    </div>

    <div class="container">
      <div>

        <div  v-if="agencyAddressList.length > 0 " style="display: flex;flex-direction: row" @click="gotoAddressList" >
          <div style="display: flex;flex-direction: column">

            <div style="padding-top: 15px;padding-left: 20px;font-size: 20px;font-weight: bold"> {{agencyAddressList.length > 0 ? agencyAddressList[0].name : '' }}  {{agencyAddressList.length > 0 ? agencyAddressList[0].tel : '' }} </div>
            <div style="display: flex;flex-direction: row;padding-left: 20px;padding-top: 10px;font-size: 16px;padding-bottom: 10px;" >
              <van-tag type="danger" v-if="agencyAddressList.length > 0 && agencyAddressList[0].mrflag == '1' ">默认</van-tag>
              <label style="padding-left: 10px;">{{agencyAddressList.length > 0 ? agencyAddressList[0].province  + agencyAddressList[0].city + agencyAddressList[0].county + agencyAddressList[0].addressDetail : ''}}</label>
            </div>

          </div>

          <div style="padding-top: 20px;padding-left: 20px;font-size: 30px;">
            >

          </div>

        </div>

        <div style="height: 70px; font-size: 30px; display: flex;justify-content: center;align-content: center;align-items: center;color: deepskyblue" @click="addAddress" v-if="agencyAddressList.length == 0 ">

          <label>新增收货地址 > </label>

        </div>

        <van-divider />


        <div style="font-size: 20px;">
           <van-card
              :num="selectedNum"
              :price="price"
              :desc="skuName"
              :title="name"
              :thumb="imageUrl"
              style="font-size: 20px;"
            />
        </div>

        <div>

       <!--   <van-field label="收货地址:" label-width="25%" placeholder="请输入" v-model="shdz"  />
          <van-field label="联系人:" label-width="25%" placeholder="请输入" v-model="lxrname" />
          <van-field label="联系电话:" label-width="25%" placeholder="请输入" v-model="lxrdh"  />-->

          <van-field label="留言:" label-width="25%" placeholder="请输入" v-model="message"  />

          <van-cell title="运费" value="免运费" />

        </div>

        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit"   />
        <div>



        </div>

      </div>

    </div>

  </div>
</template>

<script>
  import {queryShareInfo,addShareLy,queryShareLy,addShareStoreInfo ,addLyhfinfo,queryAgencyinfo,queryProductSku,queryAgenyAddress ,queryAddressById , saveAgencyOrder } from 'api/api'
  import {Toast} from 'vant'
  import eventBus from '../../utils/eventbus'
  export default {
    name: 'confirmOrder',
    data() {
      return {
        pageSize:1,
        goodsInfo :{},
        productId:'',
        skuId:'',
        selectedNum:'',
        price:'',
        totalPrice :'',
        name:'',
        skuName:'',
        imageUrl:'',
        agencyId:'',
        agencyAddressList:[],
        addressInfo:{},
        message:'',
        shdz:'',
        lxrname:'',
        lxrdh:''
      }
    },
    created() {
      let agencyIdStore = this.$store.getters.agencyId
      if(agencyIdStore){
        this.agencyId = agencyIdStore
      }else{
        this.agencyId = this.$route.query.agencyId
      }

      console.log('agencyId:',this.agencyId)

      this.productId =  this.$route.query.productId
      this.skuId =  this.$route.query.skuId
      this.selectedNum = this.$route.query.selectedNum
      this.price = this.$route.query.price
      this.totalPrice = this.price * this.selectedNum * 100

      this.queryAgenyAddress()
      console.log('经销商ID:',this.agencyId)
      this.queryProductSku()

      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight==scrollHeight){
          //写后台加载数据的函数
          this.pageSize = this.pageSize + 1

        }
      }
    },

    activated(){
      debugger

      console.log('activated执行力')

      console.log('agencyId:',this.agencyId)
      //根据key名获取传递回来的参数，data就是map
      eventBus.$on('addressInfo', function(data){

        this.productId =  data.productId
        this.skuId =  data.skuId
        this.selectedNum = data.selectedNum
        this.price = data.price
        this.totalPrice = data.totalPrice
        this.queryProductSku()

        this.agencyAddressList = []
        this.agencyAddressList[0] = data
        console.log("地址：",data);
        //this.$destroy(true)

      }.bind(this));
    },

    methods: {

      queryAgencyinfo(){

        let param = {agencyid:this.agencyId}
        let that = this
        queryAgencyinfo(param).then(res =>{
          if(res.code == 200 ){
            console.log(res)
            that.agencyInfo = res.data
            if(res.data){
              that.fromname = res.data.agencyName
            }
          }
        })
      },

      queryProductSku(){
        let param = {}
        param.productId  = this.productId
        param.skuId = this.skuId
        console.log(param)
        queryProductSku(param).then(res =>{
          if(res.code == 200 ){
            let skuList = res.rows
            if(skuList.length > 0){
              this.name = skuList[0].productName;
              this.skuName = skuList[0].skuName;
              this.imageUrl = skuList[0].skuImageUrl;
            }
          }
        })


      },

      addAddress(){
        this.$router.push({ path: '/addAddress', query:{ agencyId:this.agencyId ,productId:this.productId,skuId:this.skuId,selectedNum:this.selectedNum,price:this.price,totalPrice:this.totalPrice} })
      },

      gotoAddressList(){
        this.$router.push({ path: '/addressList', query:{ agencyId:this.agencyId,productId:this.productId,skuId:this.skuId,selectedNum:this.selectedNum,price:this.price,totalPrice:this.totalPrice } })
      },

      onClickLeft(){
        this.$router.go(-1) // 返回上一层
      },

      queryAgenyAddress(){

        let param = {mrflag:'1'}
        param.agencyId  = this.agencyId
        console.log('经销商id:',this.agencyId)
        queryAgenyAddress(param).then(res =>{
          if(res.code == 200 ){
            let agencyAddressList  = res.rows
            this.agencyAddressList = agencyAddressList

          }
        })
      },

      onInput(message){
        this.message = message
      },


      onSubmit(){
        let param = {}
        param.agencyId = this.agencyId

        param.addressId = this.agencyAddressList[0].addressId

        if(!param.addressId){
          Toast.fail('请选择收货地址')
          return
        }

        param.productId = this.productId
        param.skuId = this.skuId
        param.skuname = this.skuName
        param.productnum = this.selectedNum
        param.productPrice = this.price
        param.totalprice = this.totalPrice / 100
        param.message = this.message
        param.productname = this.name
        param.imageUrl = this.imageUrl

        param.shdz = this.shdz

      /*  if(!param.shdz){
          Toast.fail('请输入收货地址')
          return
        }

        param.lxrname = this.lxrname
        if(!param.lxrname){
          Toast.fail('请输入联系人')
          return
        }

        param.lxrdh = this.lxrdh
        if(!param.lxrdh){
          Toast.fail('请输入联系电话')
          return
        }*/

        console.log('订单参数',param)
        saveAgencyOrder(param).then(res =>{
          if(res.code == 200 ){
            let orderId = ''
            if(res.data){
              orderId = res.data.orderId
              this.$router.push({ path: '/pay', query:{ orderId :orderId , totalPrice:param.totalprice} })
            }
          }
        })
      },

      onInputShdz(value){
        this.shdz = value
      },
      onInputLxrname(value){
        this.lxrname  = value
      },

      onInputLxrdh(value){
        this.lxrdh  = value
      }

    },

  }
</script>

<style scoped>

  .container{
    background-color: white;
  }

  .liuyan{
    background-color: white;
    margin-top: 20px;
    padding-bottom: 60px;
  }
  .columnr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .name{
    padding-top: 10px;
    padding-left: 10px;
    font-size: 20px;
    color: #466BAC;
  }

  .img{
    padding-top: 10px;
    padding-left: 10px;
  }

  .content{
    font-size: 16px;
    padding:10px;
    text-indent: 2em;
  }

  .viewimg{
    width: 90%;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
  }

  .title_bg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px
  }
  .title_sx{
    height: 20px;
    width: 3px;
    background-color: #f50;
  }
  .title_name{
    color:#333333;
    font-size: 20px;
    margin-left: 5px;
    font-weight: bold;
  }

  .hfcontent{
    padding-top: 10px;
    padding-left: 60px;
    font-size: 16px;
  }

  .lyban{
    width: 99%;
    position: fixed;
    bottom: 0;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #B2B2B2 ;
  }

  .lytextcss{
    margin-top:8px;
    margin-left:10px;
    border-radius:15px;
    border: 1px solid #B2B2B2;
    width: 90%;
    height: 30px;
  }

  .textareacss{
    margin-left:10px;
    margin-right:10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #B2B2B2;
  }

  .hfcss{
    padding-left: 60px;
    padding-top: 10px;
    font-size: 16px;
  }

</style>
